<template>
    <div class="order">
        <div class="title">
            <div class="back" @click="router.push({path:'/MeView'})"></div>
            <p>订单中心</p>
            <div></div>
        </div>
        <ul>
            <li v-for="(item, index) in hotel.List" :key="index">
                <div class="hotel-title">
                    <div class="hotel-title-icon"></div>
                    <div class="hotel-title-name">{{ item.roomName }}</div>
                </div>
                <div class="hotel-cont">
                    <div class="hotel-img">
                        <img :src="item.listImage" class="auto-img">
                    </div>
                    <div class="hotel-text">
                        <p class="hotel-text-name">{{ item.roomType }}</p>
                        <p class="hotel-text-name">{{ item.hotelTime }}</p>
                        <p class="hotel-text-name">￥{{ item.price }}</p>
                    </div>
                </div>
                <div class="hotel-algin">
                    <p></p>
                    <div>再次订购</div>
                </div>
            </li>
        </ul>
    </div>

</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { orderAllType } from '@/tsList/homeFunts'

//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useOrder } from "@/stores/counter"

//使用pinia
const store = useOrder()  //使用公开的方法
let { OrderList } = storeToRefs(store)  //拿到方法里定义的值

const router = useRouter()
const route = useRoute()

//已下单酒店列表
const hotel = reactive<{List: any}>({
    List: []
})
// const hotelList = reactive([])


onMounted(() => {
    let kk = JSON.parse(JSON.stringify(OrderList.value))
    console.log('kk', kk);
    hotel.List = kk
})

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.order {
    min-height: 100vh;
    background-color: #f4f4f4;
    // background-image: linear-gradient(#f2f2fc,#d2e6fe);

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 10px;
        background-color: white;

        .back {
            width: 20px;
            height: 20px;
            background-size: cover;
            background-image: url('@/assets/icon/ZR.png');
        }

        p {
            font-size: 16px;
            font-weight: 800;
        }
    }

    ul {
        padding: 5px 10px;

        li {
            // height: 150px;
            background-color: white;
            padding: 0px 10px 10px;
            margin-bottom: 10px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;

            .hotel-title {
                height: 40px;
                width: 100%;
                border-bottom: 1px solid #f3f3f3;
                display: flex;
                align-items: center;

                .hotel-title-icon {
                    width: 20px;
                    height: 20px;
                    background-size: cover;
                    background-image: url('@/assets/icon/3r.png');
                    margin-right: 5px;
                }

                .hotel-title-name {
                    font-size: 14px;
                    font-weight: 800;
                }
            }

            .hotel-cont {
                display: flex;
                align-items: center;

                .hotel-img {
                    width: 55px;
                    height: 55px;
                    overflow: hidden;
                    border-radius: 5px;
                    background-color: black;
                }

                .hotel-text {
                    flex: 1;
                    padding: 0 10px;

                    .hotel-text-name:nth-child(1) {
                        font-size: 14px;
                        font-weight: 600;
                    }

                    .hotel-text-name:nth-child(2) {
                        font-size: 12px;
                        color: #8a8a8a;
                    }

                    .hotel-text-name:nth-child(3) {
                        font-size: 12px;
                        color: #8a8a8a;
                    }
                }
            }

            .hotel-algin {
                display: flex;
                justify-content: space-between;

                div {
                    border: 1px solid #8a8a8a;
                    color: #8a8a8a;
                    padding: 2px 10px;
                    border-radius: 20px;
                    font-size: 12px;
                }
            }

        }
    }
}
</style>